<template>
  <header class="bg-gray-800 text-white p-4">
    <nav class="container mx-auto flex justify-between items-center">
      <NuxtLink to="/" class="text-xl font-bold">Logo</NuxtLink>
      
      <div>
        <template v-if="isLoggedIn">
          <button 
            @click="handleLogout"
            class="px-4 py-2 bg-red-500 hover:bg-red-600 rounded"
          >
            退出
          </button>
        </template>
        <template v-else>
          <NuxtLink 
            to="/login"
            class="px-4 py-2 bg-green-500 hover:bg-green-600 rounded"
          >
            登录
          </NuxtLink>
        </template>
      </div>
    </nav>
  </header>
</template>

<script setup>
const auth = useAuth()
const isLoggedIn = computed(() => auth.isAuthenticated.value)

const handleLogout = async () => {
  await auth.logout()
  await navigateTo('/login')
}
</script> 